<template>
  <div>
    <Menu></Menu>
    <div class="banner">
      <img src="../assets/img/banner.png" />
      <div class="spfen">
        <p class="spfen1">分类标题文案</p>
        <p class="spfen2">分类描述文案</p>
      </div>
    </div>
    <div class="spall">
      <p class="fenl">
        <a href>所有分类</a>
        ·
        <a href>一级分类</a>
        ·
        <a href>二级分类</a>
      </p>
      <div class="xuanr">
        <span>49个商品</span>
        <div class="shaixuan">
          筛选
          <img src="../assets/img/down.jpg" />
          <div class="xuandrop">
            <ul>
              <p>颜色</p>
              <li>红色</li>
              <li>红色2</li>
              <li>红色3</li>
              <li>红色4</li>
            </ul>
            <ul>
              <p>尺寸</p>
              <li class="active">红色</li>
              <li class="active">红色2</li>
              <li>红色3</li>
              <li>红色4</li>
            </ul>
            <ul>
              <p>风格</p>
              <li>红色</li>
              <li>红色2</li>
              <li>红色3</li>
              <li>红色4</li>
            </ul>
            <ul>
              <p>颜色</p>
              <li>红色</li>
              <li>红色2</li>
              <li>红色3</li>
              <li>红色4</li>
            </ul>
          </div>
        </div>
        <div class="paixu">
          排序
          <img src="../assets/img/down.jpg" />
          <div class="drop">
            <a>销量</a>
            <a>价格从高到底</a>
            <a>最新</a>
            <a>价格从高到底</a>
            <a>产品名称A-Z</a>
            <a>产品名称Z-A</a>
          </div>
        </div>
      </div>
    </div>
    <div class="searchlist">
      <a class="searchitem" href>
        <div class="goodsimg">
          <img src />
        </div>
        <p class="goodname">商品名称</p>
        <p class="goodprice">商品价格</p>
      </a>
      <a class="searchitem" href>
        <div class="goodsimg">
          <img src />
        </div>
        <p class="goodname">商品名称</p>
        <p class="goodprice">商品价格</p>
      </a>
      <a class="searchitem" href>
        <div class="goodsimg">
          <img src />
        </div>
        <p class="goodname">商品名称</p>
        <p class="goodprice">商品价格</p>
      </a>
      <a class="searchitem" href>
        <div class="goodsimg">
          <img src />
        </div>
        <p class="goodname">商品名称</p>
        <p class="goodprice">商品价格</p>
      </a>
      <a class="searchitem" href>
        <div class="goodsimg">
          <img src />
        </div>
        <p class="goodname">商品名称</p>
        <p class="goodprice">商品价格</p>
      </a>
      <a class="searchitem" href>
        <div class="goodsimg">
          <img src />
        </div>
        <p class="goodname">商品名称</p>
        <p class="goodprice">商品价格</p>
      </a>
      <a class="searchitem" href>
        <div class="goodsimg">
          <img src />
        </div>
        <p class="goodname">商品名称</p>
        <p class="goodprice">商品价格</p>
      </a>
      <a class="searchitem" href>
        <div class="goodsimg">
          <img src />
        </div>
        <p class="goodname">商品名称</p>
        <p class="goodprice">商品价格</p>
      </a>
    </div>
  </div>
</template>

<script>
import Menu from './Menu'
export default {
   components: {Menu},
    methods:{}
};
</script>

<style lang="less" scoped>
@media screen and (max-width: 1024px) {
  @import url(../assets/css/mobile_productlist.less);
}
  @media screen and (min-width: 1024px) {
  @import url(../assets/css/pc_productlist.less);
}
</style>